<!-- AI模板 -->
<template>
  <div class="dashboard-editor-container">
    <div class="xxx" style="margin-top: 10px;">
      <div style="display:flex;justify-content:space-between;">
        <!-- <partitionTree :nodeData="nodeData" :defaultProps="defaultProps" :dialogName="'软件'" @handleNodeClick="handleNodeClick" @submitTemplete="submitTemplete" @deleteNode="deleteNode" ref="partitionTree" @toggleVisibility="toggleVisibility"></partitionTree> -->
        <div :style="{ width:containerWidth}"  class="box" style="background:#fff;padding:20px;border: 1px solid #ddd;border-radius: 4px;box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);">
          <!-- <el-button type="primary" @click="addModer">添加软件</el-button> -->
          <el-table stripe border :data="tableData" style="width: 100%; margin-top: 15px" height="730">
            <el-table-column label="序号" width="80" type="index" :index='(index) => { return (index + 1) + (pageNum - 1) * pageSize }'> </el-table-column>
            <el-table-column label="事件编码" prop="EventID" align="left" show-overflow-tooltip></el-table-column>
            <el-table-column label="事件描述" prop="AlarmDescp"  align="left" show-overflow-tooltip></el-table-column>
            <el-table-column label="事件生效" prop="Status"  align="left" show-overflow-tooltip>
              <template slot-scope="{row}">
                <!-- <span>{{ row.Status == '1' ? '是' : '否' }}</span> -->
                <span style="color:#67C23A" v-show="row.Status == '1'">是</span>
                <span style="color:#909399" v-show="row.Status != '1'">否</span>
              </template>
            </el-table-column>
            <el-table-column label="严重性等级" prop="EventLevel"  align="left" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span style="color:#F56C6C" v-show="row.EventLevel == '1'">紧急</span>
                <span style="color:#E6A23C" v-show="row.EventLevel == '2'">重要</span>
                <span style="color:#909399" v-show="row.EventLevel == '3'">默认</span>
                <span style="color:#409EFF" v-show="row.EventLevel == '4'">普通</span>
                <span style="color:#67C23A" v-show="row.EventLevel == '5'">告知</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="170px" align="left" fixed="right" >
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="changeModer(scope.row)">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog 
      :close-on-click-modal="false" 
      :close-on-press-escape="false" 
      :visible.sync="moderVisible"
      :title="Action === 1 ? '添加事件字典' : '修改事件字典'" 
      v-el-drag-dialog @close="Moder = {}" width="30%">
      <el-form label-width="100px" :rules="rules" :model="Moder" ref="Moder">
        <el-form-item label="事件编码" prop="EventID">
          <el-input placeholder="请输入事件编码" maxlength="16" :disabled="Action === 2" v-model="Moder.EventID"></el-input>
        </el-form-item>
        <el-form-item label="事件描述" prop="AlarmDescp">
          <el-input placeholder="请输入事件描述"  maxlength="32" v-model="Moder.AlarmDescp"></el-input>
        </el-form-item>
        <el-form-item label="事件生效" prop="Status">
          <el-select v-model="Moder.Status" placeholder="请选择事件是否生效" style="width:100%">
            <el-option  label="是" :value="1"></el-option>
            <el-option  label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="严重性等级" prop="EventLevel">
          <el-select v-model="Moder.EventLevel" placeholder="请选择严重性等级" style="width:100%">
            <el-option  label="紧急" :value="1"></el-option>
            <el-option  label="重要" :value="2"></el-option>
            <el-option  label="默认" :value="3"></el-option>
            <el-option  label="普通" :value="4"></el-option>
            <el-option  label="告知" :value="5"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">确 定</el-button>
        <el-button type="info" @click="moderVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { connrequest } from '@/api/firstPage'
import elDragDialog from "@/directive/el-drag-dialog"; 
import partitionTree from "@/components/partitionTree"; 
export default {
  directives: { elDragDialog },
  components: {
    partitionTree
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      // containerWidth: 'calc(100% - 240px)',
      containerWidth: '100%',
      tableData: [],
      nodeData: [],
      defaultProps: {
        children: 'Class',
        label: 'Name',
        Count: 'Count'
      },
      Action: 1,
      Moder: {},
      moderVisible: false,
      reSource: [],
      partitionList: [],
      rules:{
        Name: [
          {required: true, message: '请输入软件名称', trigger: 'blur'}
        ],
        Class: [
          {required: true, message: '请选择软件分类', trigger: 'change'}
        ],
        ExeName: [
          {required: true, message: '请输入执行文件', trigger: 'blur'}
        ]
      }
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    // this.getData()
    this.GetDictArea()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  },
  methods: {
    async getData() {
      const res = await connrequest('GetDictInstallAppTree')
      let partitionList = []
      res.Data.Name = res.Data.RootName //因为后端返回的所有分区名字叫RootName，子菜单又叫Name, 这里做个转换
      res.Data.disabled = true
      res.Data.edit = false
      res.Data.Class.map(item => {
        item.edit = false
        partitionList.push(item)
      })
      this.nodeData = [res.Data]
      this.partitionList = partitionList
      // this.GetDictArea(this.PrimName)
    },
    async GetDictArea(Name){
      const data = {
        Filter:{
          Name: Name || ''
        }
      }
      const res = await connrequest('GetParamDictEvent', data)
      this.tableData = res.Data
      if(Name === '' || Name === undefined){  //获取所有编码
        let partitionNumber = []
        res.Data.map(item => {
          partitionNumber.push(item.AreaCode)
        })
        this.partitionNumber = partitionNumber
      }
    },
    handleNodeClick(nodeData){
      const {data} = nodeData
      let PrimName = data.Name === '所有软件' ? '' : data.Name
      this.PrimName = PrimName
      this.$set(this.Moder, 'PrimArea', PrimName)
      this.GetDictArea(PrimName)
    },
    async submitTemplete(node){
      const data = {
        Data:{
          Action: node.Action,
          Detail:{
            Name: node.Name
          }
        }
      }
      const res = await connrequest('EditDictProcTree', data)
      if(res.Status.StatusCode === 0){
        this.$message.success(node.Action === 1 ? '新增成功' : '修改成功')
        this.$refs.partitionTree.moderVisible = false
        this.getData()
      }
    },
    async deleteNode(node){
      if(node.Count > 0){
        this.$message.error('该软件下还有数据，请清空后再删除')
        return
      }
      const data = {
        Data:{
          Action: 3,
          Detail:{
            Name: node.Name
          }
        }
      }
      const res = await connrequest('EditDictProcTree', data)
      if(res.Status.StatusCode === 0){
        this.$message.success('删除成功')
        this.getData()
      }
    },
    addModer(){
      this.Action = 1
      this.Moder = {PrimArea: this.PrimName || this.partitionList[0]?.PrimName}
      this.$nextTick(() => {
        this.$refs.Moder.clearValidate();
      })
      this.moderVisible = true
    },
    changeModer(row){
      this.Action = 2
      this.Moder = {...row}
      this.moderVisible = true
    },
    deleteModer(row){
      this.$confirm('此操作将永久删除该软件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = {
          Data: {
            Action: 3,
            Detail: {...row}
          }
        }
        const res = await connrequest('ModifyParamDictEvent', data)
        if(res.Status.StatusCode === 0){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getData()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    async submit(){
      this.$refs['Moder'].validate(async (valid) => {
        if (valid) {
          const data = {
            Data: {
              ...this.Moder
            }
          }
          const res = await connrequest('ModifyParamDictEvent', data)
          if(res.Status.StatusCode === 0){
            this.$message.success(this.Action === 1 ? '新增成功' : '修改成功')
            this.moderVisible = false
            this.getData()
          }
        }
      })
    },
    toggleVisibility(isHidden) {
      if(isHidden)
        this.containerWidth = '100%';
      else 
        this.containerWidth = 'calc(100% - 240px)';
    },
  }
};
</script>
<style scoped>
.box {
  background-color: lightblue;
  transition: width 0.5s; /* 添加过渡动画 */
}

</style>
